<!DOCTYPE html>
<html>
<!--dfdfdddddddddddddd-->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.cartList {
				width: 1200px;
			}
			
			ul {
				list-style: none;
			}
			
			.cartHead {
				border-bottom: 2px solid #ccc;
				height: 50px;
			}
			
			.cartHead li {
				width: 200px;
				height: 50px;
				float: left;
				font: 32px/50px "楷体";
				text-align: center;
			}
			
			.goodInfo {
				border-bottom: 1px solid #ccc;
				border-top: none;
				height: 50px;
			}
			
			.goodInfo li {
				float: left;
				width: 200px;
				height: 50px;
				float: left;
				font: 12px/20px "";
				text-align: center;
			}
			
			.goodInfo li input {
				width: 30px;
				text-align: center;
			}
			
			.goodInfo li.num a {
				display: inline-block;
				width: 10px;
				height: 20px;
				font: 12px/20px "";
				background: #ddd;
				text-decoration: none;
			}
			
			.goodInfo li img {
				width: 40px;
				height: 40px;
				margin-top: 5px;
				text-align: center;
			}
			
			.blank {
				height: 50px;
				font: 16px/50px "";
				text-align: center;
				border-top: none;
				display: none;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/car.css"/>
		<script type="text/javascript" src="jss/jquery-1.11.3.js"></script>
		<script type="text/javascript" src="jss/jquery.cookie.js"></script>
	</head>

	<body>
		
		<div class ="top">
			<div class = "wrap">
				<ul>
					<li>
						<span class = "span0"></span>
						<a href="weixindenglu.html">微信登录</a>
					</li>
					<li>
						<span class = "span1"></span>
						<a href="qqdenglu.html">qq登录</a> 
					</li>
					<li><a href="denglu.html">登录</a> </li>
					<li><a href="zhuce.html">注册</a> </li>
					<li>
						<span class = "span2"></span >
						<a href="">我的收藏</a>
						<div class = "shoucang2">
						   <a>收藏宝贝</a><br/><a>收藏店铺</a>
						</div
					</li>
					
					<li class = "shouchang">
						<span class = "span3"></span>
						<a href="car.html">我的购物车</a>
					</li>
					<li>
						<span class = "span4"></span><a href="">我的订单</a></li>
					<li><a href="##">帮助中心</a><span class = "span5 "></span><div class = "fuwu3"><a>买家服务</a><br/><a>卖家服务</a><br/><a>服务中心</a></li>					
					<li class = "last"><a href="">商家后台</a></li>
				</ul>
			</div>
		</div>
    <!-----------------------nav----------------------------->
        <div class = "nav">
        	<div class = "wrap">
        	    <a href = "index.html"> <img src = "img/182326981374.png" /> </a>	
        	</div>
        </div>
<!-- --******************main******************************************-->
<div class = "main">
	<div class = 'wrap'>
		<div class = "mtop">
			<ul>
				<li><a href ="#">全部商品(1)</a></li><span>|</span>
				<li><a href ="#">优惠(1)</a></li><span>|</span>
				<li><a href ="#">库存紧张(1)</a></li>
			</ul>
		</div>
		<script>
			$('.main .mtop ul li a').click(function(){
				$(this).css({"background": "red"}).parent().siblings("li").children('a').css({"background":"none"})
			})
		</script>
		<div class = "mbottom">
			
		<div class="cartList">
			<ul class="cartHead">
				<li>缩略图</li>
				<li>品名</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>
			
			<div class="blank">
				您的购物车是空的赶快购买商品吧。
				<p>去看看大家都喜欢的<a href ="indexson.html" class = "fontColor">最热商品</a></p>
			</div>
		</div>
		
		</div>
	</div>
</div>
<!-----------------footer---------------------->
<div class ="footer">
	<div class="fcenter">
		<p><a href = "index.html">美丽说</a>@2016 Meilishuo.com,All Right </p>
	</div>
</div>


<script type="text/javascript">
			$(function() {
				var cartStr = $.cookie("cart") ? $.cookie("cart") : "";

				if(!cartStr) {
					$('.cartHead').hide();
					$(".blank").css({
						display: "block"
					});
				} else {
					var cartObj = convertCartStrToObj(cartStr);
					for(var id in cartObj) {
						var good = cartObj[id];
						var str = '<ul class="goodInfo" data-good-id="' + id + '">' +
							'<li><img src="' + good.src + '" /></li>' +
							'<li>' + good.name + '</li>' +
							'<li>' + good.price + '</li>' +
							'<li class="num">' +
							'<a href="javascript:;" class="minus">-</a>' +
							' <input type="text" value="' + good.num + '" />  ' +
							'<a href="javascript:;" class="plus">+</a>' +
							'</li>' +
							'<li class="total">' + good.num * good.price + '</li>' +
							'<li><a href="javascript:;" class="del">删除</a></li>' +
							'</ul>';
						$(str).appendTo(".cartList");
					}
					$('.goodInfo a.del').click(function() {
						var id = $(this).parents('.goodInfo').remove().attr("data-good-id");
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);

						delete cartObj[id];
						$.cookie('cart', convertObjToCartStr(cartObj), {
							expires: 7,
							path: "/"
						});
					})

					$(".goodInfo a.plus").click(function() {

						var id = $(this).parents('.goodInfo').attr("data-good-id");

						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						cartObj[id].num += 1;
						$(this).siblings("input").val("" + cartObj[id].num);
						$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
						$.cookie('cart', convertObjToCartStr(cartObj), {
							expires: 7,
							path: "/"
						});
					});
					$(".goodInfo a.minus").click(function(){
						var id = $(this).parents('.goodInfo').attr("data-good-id");
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						if(cartObj[id].num > 1){ 
							cartObj[id].num -= 1;
							$(this).siblings("input").val("" + cartObj[id].num);
							$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
							$.cookie('cart', convertObjToCartStr(cartObj), {
								expires: 7,
								path: "/"
							});
						}
						
						
					});
					
					$(".goodInfo li.num input").blur(function(){
						var id = $(this).parents('.goodInfo').attr("data-good-id");
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						var pattern = /^\d+$/;
						if(!pattern.test($(this).val())){
							cartObj[id].num = 1;
							$(this).val("1");
						}else{
						cartObj[id].num = parseInt($(this).val());
						}
						
						
							$(this).siblings("input").val("" + cartObj[id].num);
							$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
							$.cookie('cart', convertObjToCartStr(cartObj), {
								expires: 7,
								path: "/"
							});
					})
					
			}

			});

			function convertCartStrToObj(cartStr) {
				if(!cartStr) {
					return {};
				}
				var goods = cartStr.split(":");
				var obj = {};
				for(var i = 0; i < goods.length; i++) {
					var data = goods[i].split(",");
					obj[data[0]] = {
						name: data[1],
						price: parseFloat(data[2]),
						num: parseInt(data[3]),
						src: data[4]
					}
				}
				return obj;
			}

			function convertObjToCartStr(obj) {
				
				var cartStr = "";
				for(var id in obj) {
					if(cartStr) {
						cartStr += ":";
					}
					cartStr += id + "," + obj[id].name + "," + obj[id].price + "," + obj[id].num + "," + obj[id].src;
				}
				return cartStr;
			}
		</script>
	</body>

</html>